<template>
  <div class="box">
    <div class="scroll-view">
      <projectMsg :projectId="$route.query.id" :hrefProject="true"></projectMsg>
      <div class="user-title-box">基础信息</div>
      <el-form :model="tjRuleForm" :rules="tjRules" ref="tjRuleForm" label-position="top">
        <!-- log_file -->
        <el-form-item label="整改内容" prop="rectification_description">
          <el-input :rows="4" class="input-box" v-model="tjRuleForm.rectification_description"
            type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="整改文件 (.jpg,.png,.gif)" prop="rectification_file">
          <div class="file-list-box">
            <el-upload accept="image/*" multiple class="avatar-uploader" action="#" :show-file-list="false"
              :auto-upload="false" list-type="picture-card" :on-change="dkrzFileChange">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="file-item-box" v-for="(item, index) in tjRuleForm.rectification_file" :key="index">
              <div class="el-icon-delete-box" @click="dkrzFileRemove(index)">
                <i class="el-icon-error"></i>
              </div>
              <el-tooltip class="item" effect="dark" :content="item.name || item.file_name" placement="top">
                <img class="img" :src="$fileImgFunc(item)" />
              </el-tooltip>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tjSubmit('tjRuleForm')" :disabled="diaLoading"
          :loading="diaLoading">提交</el-button>
        <el-button @click="tjCancel('tjRuleForm')">关闭</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import rectificationApi from '@/api/rectificationApi';
import projectMsg from "@/components/ProjectMsg";


export default {
  name: "TJzgd",
  components: {
    projectMsg,
  },
  data() {
    var fileRules = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error("请上传整改附件"));
      } else {
        callback();
      }
    };
    return {
      tjRuleForm: {
        rectification_description: "",
        rectification_file: [],
      },
      tjRules: {
        rectification_file: [
          { required: true, validator: fileRules, trigger: "change" },
        ],
        rectification_description: [{ required: true, message: "请输入内容", trigger: "change" }],
      },
      diaLoading: false,
    };
  },
  watch: {
  },
  computed: {},
  mounted() {

  },
  methods: {
    tjCancel() {
      this.$goBackTab(this);
    },
    tjSubmit(formName) {
      let tjRuleForm = this.tjRuleForm;
      if (!this.$route.query.id) {
        this.$message({
          type: 'warning',
          message: "整改单不存在"
        })
        return;
      }
      console.log(tjRuleForm, "参数");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let formdata = new FormData();
          formdata.append('data', JSON.stringify({
            rectification_id: this.$route.query.id,
            rectification_description: tjRuleForm.rectification_description
          }))
          tjRuleForm.rectification_file.forEach(item => {
            formdata.append('rectification_file[]', item.raw);
          })
          this.submitRectification(formdata);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 提交整改
    submitRectification(obj) {
      this.diaLoading = true;
      rectificationApi.submitRectification(obj).then(res => {
        console.log(res, "提交整改")
        this.diaLoading = false;
        if (res.code == 200) {
          this.tjCancel();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    //选择文件
    dkrzFileChange(file, list, type) {
      console.log(file, list, type);
      this.tjRuleForm.rectification_file = list;
    },
    // 删除文件
    dkrzFileRemove(index) {
      this.tjRuleForm.rectification_file.splice(index, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/projectOparet.scss';
@import "@/styles/addPage.scss";
</style>